<template>
    <div>
      <div class="ys-invite-title1" v-if="!noData">以下同事还未参与友运动</div>
      <div  class="ys-keyword-list page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }" v-if="!noData">
        <div class="page-infinite-list" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="50">
              <div class="ys-invite-title2" v-if="isShowMineDep">我的部门</div>
              <ul>
                  <li v-for="(item,index) in list" class="flex-layout">
                      <Avatar :avatar="item.headImgUrl" :name="item.realName"></Avatar>
                      <div class="person-info flex">
                          <div class="name">{{item.realName}}</div>
                          <div class="depName">{{item.deptName}}</div>
                      </div>
                      <div class="deal-btn" v-if="!item.invited">
                          <button class="btn" type="button" @click="doInvite(index,item)">邀请</button>
                      </div>
                      <div class="deal-btn" v-if="item.invited">
                          <span class="btn-invited">已邀请</span>
                      </div>
                  </li>
              </ul>
              <div class="ys-invite-title2" v-if="isShowOtherDep">其他同事</div>
              <ul>
                  <li v-for="(item,index) in otherList" class="flex-layout">
                      <Avatar :avatar="item.headImgUrl" :name="item.realName"></Avatar>
                      <div class="person-info flex">
                          <div class="name">{{item.realName}}</div>
                          <div class="depName">{{item.deptName}}</div>
                      </div>
                      <div class="deal-btn" v-if="!item.invited">
                          <button class="btn" type="button" @click="doInvite(index,item)">邀请</button>
                      </div>
                      <div class="deal-btn" v-if="item.invited">
                          <span class="btn-invited">已邀请</span>
                      </div>
                  </li>
              </ul>
          </div>
              <p v-show="loading" class="page-infinite-loading">
                  <mt-spinner type="fading-circle"></mt-spinner>
                  加载中...
              </p>
          </div>

      <div class="no-data" v-if="noData">
          <div class="circle">
              <img src="../assets/img/no-select.png" alt="暂无数据">
          </div>
          <p>未搜索到"<em>{{keyword}}</em>"相关数据</p>
      </div>
    </div>
</template>

<script type="text/babel">
    import util from '../assets/util'
    import Avatar from './ys-avatar.vue';
    import config from '../assets/config';
    import { Toast } from 'mint-ui';

    export default {
        data() {
            return {
                loading: false,
                wrapperHeight: 0,
                url:config.host + config.invite,
                inviteSearchUrl: config.host + config.inviteSearch,
                inviteMineDepUrl: config.host + config.inviteMineDep,
                inviteOtherDepUrl: config.host + config.inviteOtherDep,
                isShowMineDep: false,
                isShowOtherDep: false,
                isInviteSearch: false,
                isFinished:false,
                noData: false,
                mineDepNoData: false,
                otherDepNoData: false,
                list:[],
                otherList: [],
                pageInfo: {
                    page: 1,
                    size: 10
                }

            };
        },

        props:{
            keyword:{
                type:String,
                default: ''
            }
        },
        watch:{
            keyword(n, o) {
                this.pageInfo.page = 1;
                this.initData();
            }
        },
        activated(){
          this.init();
        },
        methods: {
            init() {
                this.loading = true;
                this.initData();
            },

            initData(){
                let me = this, url;
                this.pageInfo.page = 1;
                if(this.keyword !=  ''){
                  this.isInviteSearch = true;
                  url = this.inviteSearchUrl;
                } else {
                  this.isInviteSearch = false;
                  url = this.inviteMineDepUrl;
                }
                this.$http.get(url, {
                    params:{
                        page:this.pageInfo.page,
                        size:this.pageInfo.size,
                        keyword:this.keyword
                    }
                }).then((res)=>{
                    if(res.data.code === 0){
                      this.loading = false;
                      this.list = res.data.data.list;
                      let length = this.list.length;
                      this.mineDepNoData = length == 0 ? true : false;

                      if(length < this.pageInfo.size) {
                          this.isFinished = true;
                          this.loading = false;
                      } else {
                          this.isFinished = false;
                          this.pageInfo.page ++;
                      }

                      if(this.isInviteSearch){
                        this.isShowOtherDep = false;
                        this.isShowMineDep = false;
                        this.noData = this.mineDepNoData;
                        this.otherList = [];
                      } else {
                        this.isShowMineDep = length > 0 ? true : false;
                        // 如果我的部门没有下一页则显示其他部门人员
                        if(!res.data.data.hasNextPage){
                            this.isShowOtherDep = true;
                            this.inviteOtherDepFunc()
                        } 
                      }
                    }
                }).catch((res) => {
                    this.loading = false;
                });
            },

            inviteOtherDepFunc: function(){
              let me = this;
              this.pageInfo.page = 1;
              this.$http.get(this.inviteOtherDepUrl, {
                  params:{
                      page:this.pageInfo.page,
                      size:this.pageInfo.size,
                      keyword:this.keyword
                  }
              }).then((res)=>{
                if(res.data.code === 0){
                  this.loading = false;
                  this.otherList = res.data.data.list;
                  let length = this.otherList.length;
                  this.otherDepNoData = length == 0 ? true : false;
                  this.noData = this.mineDepNoData && this.otherDepNoData ? true : false;
                  if(length < this.pageInfo.size) {
                      this.isFinished = true;
                      this.loading = false;
                  } else {
                      this.isFinished = false;
                      this.pageInfo.page ++;
                  }
                }
              }).catch((res) => {
                this.loading = false;
              });
            },

            loadMore() {
              let url;
                if(this.loading) return;
                this.loading = true;
                url = this.isShowOtherDep ? this.inviteOtherDepUrl : this.inviteMineDepUrl;
                url = this.keyword != '' ? this.inviteSearchUrl : url;
                this.$http.get(url, {
                    params:{
                        page:this.pageInfo.page,
                        size:this.pageInfo.size,
                        keyword:this.keyword
                    }
                }).then((res)=>{
                    this.loading = false;
                    let length = res.data.data.list.length;
                    //难点
                    this.otherList = this.otherList.concat(res.data.data.list);
                    if(length < this.pageInfo.size) {
                        this.isFinished = true;

                    } else {
                        this.pageInfo.page ++;
                        this.isFinished = false;
                    }

                }).catch((res) => {
                    this.loading = false;
                });

            },

            doInvite(index,item){
              this.$http.post(this.url+'&memberId='+item.memberId).then((res)=>{
                if(res.data.code == 0){
                  this.$set(this.list[index], 'invited', true);
                  Toast({
                    message: '邀请成功',
                    position: 'bottom',
                  });
                } else {
                  Toast({
                    message: '邀请失败',
                    position: 'bottom',
                  });
                }
              });
            }

        },

        mounted() {
          this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        },
        components:{
            Avatar
        }
    };
</script>
<style lang="less">
  .ys-invite-title1{
    font-size: 13px;
    padding: 0 12px 10px;
    background: #fff;
  }
  .ys-invite-title2{
    font-size: 13px;
    color: #9E9E9E;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background: #f5f5f5;
  }
  .ys-keyword-list{
    ul{
      li{
        height: 64px;
        background: #fff;
        align-items: center;
        &+li {
          border-top:1px solid #eee;
        }

        .deal-btn{
          margin-right: 12px;
          .btn-invited{
            display: block;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ADADAD;
            font-size: 13px;
          }
          button{
            display: block;
            width: 60px;
            height: 30px;
            margin: 0;
            padding: 0;
            line-height: 30px;
            border: 1px solid #81c684;
            outline: 0;
            text-align: center;
            font-size: 13px;
            color: #81c684;
            background: #fff;
            border-radius: 3px;
          }
        }
      }
    }
  }
</style>
